
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Home</title>
<!-- load stylesheets -->
<!-- <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:100,300,400">   <!-- Google web font "Open Sans" -->
<link rel="stylesheet" href="font-awesome-4.5.0/css/font-awesome.min.css">                <!-- Font Awesome -->
<link rel="stylesheet" href="css/bootstrap.min.css">                                      <!-- Bootstrap style -->
<link rel="stylesheet" href="css/magnific-popup.css">                                     <!-- Magnific pop up style -->
<link rel="stylesheet" href="css/templatemo-style.css">                                   <!-- Templatemo style -->

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>

<body id="top" class="home">

<div class="container-fluid">
	<div class="row">
	  
		<div class="tm-navbar-container">
		
		<!-- navbar   -->
		<nav class="navbar navbar-full navbar-fixed-top">

			<button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
				&#9776;
			</button>
				
			<div class="collapse navbar-toggleable-sm" id="tmNavbar">                            

				<ul class="nav navbar-nav">
					<li class="nav-item">
						<a class="nav-link" href="#top">首页</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#tm-section-2">文章</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#tm-section-3">博主图文</a>
					</li>
					<?php if(Yii::$app->user->identity) { ?>
					<li class="nav-item">
						<a class="nav-link external" href="#"><?php echo Yii::$app->user->identity->username ?></a>
					</li>
						<li class="nav-item">
							<a class="nav-link external" href="site/logout">退出</a>
						</li>
					<?php }else{ ?>
						<li class="nav-item">
							<a class="nav-link external" href="site/signup">注册</a>
						</li>
						<li class="nav-item">
							<a class="nav-link external" href="site/login">登陆</a>
						</li>
					<?php } ?>
				</ul>

			</div>
		  
		</nav>

	  </div>  

   </div>

   <div class="row">
		<div class="tm-intro">

			<section id="tm-section-1">                        
				<div class="tm-container text-xs-center tm-section-1-inner">
					<img src="img/tm-lumino-logo.png" alt="Logo" class="tm-logo">
					<h1 class="tm-site-name">Lumino</h1>
					<p class="tm-intro-text">Free Bootstrap 4.0 Website Template</p>
					<a href="#tm-section-2" class="tm-intro-link">Begin</a>    
				</div>                                               
		   </section>

		</div>
	</div>

	<div class="row gray-bg">
		
		<div id="tm-section-2" class="tm-section">
			<div class="tm-container tm-container-wide">

			<?php foreach($providers as $v){?> 

				<div class="tm-news-item">
					
					<div " class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container">
						<img src="img/tm-600x300-01.jpg" alt="Image" class="img-fluid tm-news-item-img">  
					</div>
					
					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">
						<h2 class="tm-news-title dark-gray-text"><?php echo $v->title;?></h2>
						<p class="tm-news-text"></p>
						<a href="<?= yii\helpers\Url::to(['article/view','id'=>$v->id])?>" class="btn tm-light-blue-bordered-btn tm-news-link">显示全文</a>
					</div>
				</div>

			<?php } ?>	

<!-- 				<div class="tm-news-item">

					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 flex-order-2 tm-news-item-img-container">
						<img src="img/tm-600x300-02.jpg" alt="Image" class="img-fluid tm-news-item-img">
					</div>

					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container flex-order-1">
						<h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
						<p class="tm-news-text">You may download, modify and use this template as you wish. Lumino HTML5 template is a fully responsive mobile ready for any kind of website.</p>
						<a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Detail</a>
					</div>
				</div>

				<div class="tm-news-item">

					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-item-img-container">
						<img src="img/tm-600x300-03.jpg" alt="Image" class="img-fluid tm-news-item-img">
					</div>

					<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 tm-news-container">
						<h2 class="tm-news-title dark-gray-text">Nulla molestie euismod</h2>
						<p class="tm-news-text">Credit goes to Unsplash for images used in this website template. Nulla sit amet tristique lacus. Etiam blandit ex vitae mauris gravida.</p>
						<a href="#" class="btn tm-light-blue-bordered-btn tm-news-link">Read</a>
					</div>
				</div> -->
			</div>                    
	   </div>

   </div> <!-- row -->

	<div class="row">

		<section id="tm-section-3" class="tm-section">
			<div class="tm-container text-xs-center">
				
				<h2 class="blue-text tm-title">Lorem ipsum dolor sit amet</h2>
				<p class="margin-b-5">Etiam at rhoncus nisl. Nunc rutrum ac ante euismod cursus.</p>
				<p>Suspendisse imperdiet feugiat massa nex iaculis.</p>
			   
				<div class="tm-img-grid">
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-01.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-01.jpg" alt="Image" class="img-fluid tm-gallery-img"> <!-- 300x200 -->
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-07.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-07.jpg" alt="Image" class="img-fluid tm-gallery-img">  
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-02.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-02.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>                           
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-09.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-09.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-03.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-03.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-08.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-08.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-10.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-10.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-04.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-04.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-05.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-05.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-11.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-11.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-06.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-06.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
					<div class="tm-gallery-img-container">
						<a href="img/tm-450x300-12.jpg" class="tm-gallery-img-link">
							<img src="img/tm-450x300-12.jpg" alt="Image" class="img-fluid tm-gallery-img">
						</a>
					</div>
				</div>
			</div>
		</section>

	</div> <!-- row -->

	<div class="row gray-bg">

		<section id="tm-section-4" class="tm-section">
			<div class="tm-container">

				<h2 class="blue-text tm-title text-xs-center">Contact Us</h2>
			  
				<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
					<form action="index.html" method="post" class="tm-contact-form">                                
						<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-left">
							<input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="Name"  required/>
						</div>
						<div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 tm-form-group-right">
							<input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="Email"  required/>
						</div>
						<div class="form-group">
							<input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="Subject"  required/>
						</div>
						<div class="form-group">
							<textarea id="contact_message" name="contact_message" class="form-control" rows="6" placeholder="Message" required></textarea>
						</div>
					
						<button type="submit" class="btn tm-light-blue-bordered-btn pull-xs-right">Submit</button>                          
					</form>   
				</div> <!-- col -->
				
				<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4 margin-top-xs-50">
					<h3 class="light-blue-text tm-subtitle">Etiam at rhoncus nisl</h3>
					<p>Nunc rutrum ac ante euismod cursus. Suspendisse imperdiet feugiat massa nec iaculis</p>
					<p>
						Tel: <a href="tel:0100200340">010-020-0340</a><br>
						Email: <a href="mailto:info@company.com">info@company.com</a>
					</p>
				</div>
			</div>                    
		</section>

		<!-- footer -->
		<footer class="tm-footer">                
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
				<p class="text-xs-center tm-footer-text">Copyright &copy; 2016.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>                    
			</div>                
		</footer>  

	</div> <!-- row -->
   
</div> <!-- container-fluid -->

<!-- load JS files -->

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/tether.min.js"></script> 
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.singlePageNav.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Templatemo scripts -->
<script>     

	$(document).ready(function(){

		var mobileTopOffset = 54;
		var desktopTopOffset = 80;
		var topOffset = desktopTopOffset;

		if($(window).width() <= 767) {
			topOffset = mobileTopOffset;
		}
		
		/* Single page nav
		-----------------------------------------*/
		$('#tmNavbar').singlePageNav({
		   'currentClass' : "active",
			offset : topOffset,
			'filter': ':not(.external)'
		}); 

		/* Handle nav offset upon window resize
		-----------------------------------------*/
		$(window).resize(function(){
			if($(window).width() <= 767) {
				topOffset = mobileTopOffset;
			} 
			else {
				topOffset = desktopTopOffset;
			}

			$('#tmNavbar').singlePageNav({
				'currentClass' : "active",
				offset : topOffset,
				'filter': ':not(.external)'
			});
		});
		

		/* Collapse menu after click 
		-----------------------------------------*/
		$('#tmNavbar a').click(function(){
			$('#tmNavbar').collapse('hide');
		});

		/* Turn navbar background to solid color starting at section 2
		---------------------------------------------------------------*/
		var target = $("#tm-section-2").offset().top - topOffset;

		if($(window).scrollTop() >= target) {
			$(".tm-navbar-container").addClass("bg-inverse");
		}
		else {
			$(".tm-navbar-container").removeClass("bg-inverse");
		}

		$(window).scroll(function(){
		   
			if($(this).scrollTop() >= target) {
				$(".tm-navbar-container").addClass("bg-inverse");
			}
			else {
				$(".tm-navbar-container").removeClass("bg-inverse");
			}
		});


		/* Smooth Scrolling
		--------------------------------------------------------------*/
		$('a[href*="#"]:not([href="#"])').click(function() {
			if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
				&& location.hostname == this.hostname) {
				
				var target = $(this.hash);
				target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
				
				if (target.length) {
					
					$('html, body').animate({
						scrollTop: target.offset().top - topOffset
					}, 1000);
					return false;
				}
			}
		}); 

	  
		/* Magnific pop up
		------------------------- */
		$('.tm-img-grid').magnificPopup({
			delegate: 'a', // child items selector, by clicking on it popup will open
			type: 'image',
			gallery: {enabled:true}            
		});            
	});

</script>             

</body>
</html>